<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习11</title>
		<!--导入JQuery核心类库-->
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<!--导入easyui类库 -->
	<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
	<!--导入默认主题css文件-->
	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css" />
	<!--导入图标-->
	<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />
	<!--导入国际化信息文件-->
	<script src="js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
	
	<!--在页面引入ztress-->
	<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>
	<link rel="stylesheet" type="text/css" href="js/ztree/zTreeStyle.css" />
	<!--<script src="js/easyui/locale/easyui-lang-zh_CN.js"></script>-->
		
	<!--开始写jquery代码段            -->
		<script type="text/javascript">
			//页面加载后执行
			$(function() {
				//对西部折叠面板区的超链接 添加点击事件
				$("#czbkLink").click(function() {
					//添加一个新的选项卡
					$("#mytabs").tabs('add',{
						
						title: '传智播客',
						content: '传智播客专注IT培训教育'
					});
				});
				
				
				/*树形菜单代码-------------------------------------------*/
				//1.进行ztree菜单设置
				var setting={
					data:{  
						
						simpleData:{
							enable:true   //支持json数据格式
						}
					},
					/*为每一个ztree树形节点 添加点击事件*/
					callback:{
						onClick:function(event, treeId, treeNode,clickFlag){
							
								var content = '<div style="width:100%;height:100%;overflow: hidden;"> <iframe src="'
								+ treeNode.page
								+ '" scrolling="auto" style="width:100%;height:100%;border:0px;" ></iframe></div>';
							//没有page树形菜单，不打开选项卡
							if(treeNode.page){
								//如果选项卡已经打开，则选中
								if($("#mytabs").tabs('exists',treeNode.name)){//判断选项卡是否已经打开
									//选中选项卡            注意:树形节点的名称就是选项卡的  标题
									$("#mytabs").tabs('select',treeNode.name);
								}else{//选项卡没有打开 ，则需要打开一个选项卡
									//添加选项卡
									$("#mytabs").tabs('add',{
										title: treeNode.name,  //
										content: content ,  //选项卡的内容 
										closable: true//开启关闭选项卡的按钮
									});
							}
							}
						
						}
					}				
				};
			
				// 基本功能菜单加载
				$.post("data/menu.json",function(data){
					$.fn.zTree.init($("#baseMenu"), setting, data);
				},"json");

				
				
				
				
				
				
				
				//设置一个全局变量  存储当前正在执行   右键的tabs的标题
				var currenRightTitle ;
				//对选项卡注册     右击事件
				$("#mytabs").tabs({ 
					onContextMenu:function(e,title,index){//选项卡的右击事件*/
						currenRightTitle = title ;//将标题 赋值给全局变量
						//阻止默认菜单显示
						e.preventDefault();
						//显示自定义的菜单
						$("#mm").menu('show',{//显示出菜单  并指出菜单出现的位置
							left:e.pageX,
							top:e.pageY
						});
					}
				});	
				
				
				//窗口右下角 消息提示框
				$.messager.show({
					title:"消息提示框",
					msg:"欢迎登陆，超级管理员！<a href='#'>联系管理员</a>",
					timeout:5000
				});
				
				/*window.setTimeout(function(){
					$.messager.show({
					title:"消息提示框",
					msg:"欢迎登陆，超级管理员！<a href='#'>联系管理员</a>",
					timeout:2000
					});	
				},3000);*/
					
				
				
				//选项卡下拉框的  功能实现
				$("#mm").menu({ //item代表了 每一个选项卡对象 
					onClick: function(item) { //menu的方法 监听'onClick'事件
					
						if(item.name == 'closeCurrWindon') { //关闭当前窗口     
							$('#mytabs').tabs('close', currenRightTitle);//close方法需要传关闭的标题或索引来确定关闭哪一个选项卡
						} else if(item.name == 'closeOtherWindon') { //关闭其他选项卡
							var tabs = $('#mytabs').tabs('tabs');//返回所有选项卡面板 存到变量tabs中
							$(tabs).each(function() {
								if($(this).panel('options').title != '消息中心' &&  // 获得当前遍历的   选项卡的标题             
								//返回选择的属性    $(this).panel('options').title
										$(this).panel('options').title != currenRightTitle) {//关闭其他选项卡
									$('#mytabs').tabs('close',$(this).panel('options').title);		
								}
							});

						} else if(item.name == 'closeAllWindon') {  //关闭所有选项卡
							var tabs = $('#mytabs').tabs('tabs');
							$(tabs).each(function(){
								if($(this).panel('options').title != '消息中心'){ //关闭所有选项卡
									$('#mytabs').tabs('close',$(this).panel('options').title);
								}
							});
						}
						
					}
				});
				
				/*说明:
				 * 1.获得每一个菜单下拉项,即获得菜单框的每一个菜单:
				 * 通过id属性获得对象,再通过    对象.插件()			
				*/
				
			});	
		</script>
	</head>
	
	<body class="easyui-layout">
		
		
		<div data-options="region:'north',split:true" style="height:70px;padding:10px;">
			<div><img src="images/logo.png" /></div>
			<div id="sessionInfoDiv" style="position: absolute; right: 15px; top: 10px;">
				[<strong>超级管理员</strong>]，欢迎你！您使用[<strong>192.168.1.100</strong>]IP登陆！
			</div>
			<div style=" position: absolute; right: 5px; bottom:10px;">
				<!--下拉菜单-->
				<a href="#" class="easyui-menubutton" data-options="menu:'#layout_north_pfMenu' , iconCls:'icon-ok'"><font color="#0000FF">更换皮肤</font></a>
				<a href="#" class="easyui-menubutton" data-options="menu:'#layout_north_kzmbMenu' ,iconCls:'icon-help'"><font color="#0000FF">控制面板</font></a>
			</div>
		</div> 
		
		
			<div data-options="region:'west',title:'菜单导航',split:true" style="width: 180px;">
				<!--西部区域增加折叠面板accordion-->
				<div class="easyui-accordion" data-options="fit:true">
					<div data-options="title:'基础功能'" >
						<!--通过ztree 插件，制作树形菜单-->
						<ul id="baseMenu" class="ztree"></ul>
					</div>	
				
					<div data-options="title:'系统菜单'"></div>
					<div data-options="title:'应用菜单'">
						<a href="javascript:void(0)" id="czbkLink">传智播客</a><br />
						<a href="javascript:void(0)" id="baiduLink">百度</a>
					</div>
				</div>
			</div>
		</div>
		
		<div data-options="region:'center',split:true">
			<!--中部选择项卡面板 tabs-->
			<div id="mytabs" class="easyui-tabs" data-options="fit:true">
				<div title="消息中心" data-options="closable:true">消息中心</div>
				<div title="选项卡2" data-options="closable:true">选项二</div>
				<div title="选项卡3">选项三</div>
				<div title="选项卡4">选项四</div>
			</div>
		</div>
		<!--<div data-options="region:'east',title:'东边标题',split:true" style=" width: 100px;">东部标题</div>-->
		<div data-options="region:'south',split:true" style="height: 100px;">
			<div style="height: 20px; left: 10px;">
				BOSv2.0综合物流管理平台 | Powered by <a href="http://www.itcast.cn/">传智播客</a> 
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<img src="images/online.png" />在线人数
			</div>
			
			
		</div>

		<!--选项卡的右击 菜单：菜单初始化都是隐藏的-->
		<div id="mm" class="easyui-menu"  style="width: 120px;">
			<div data-options="name:'closeCurrWindon'">关闭当前窗口</div>
			<div data-options="name:'closeOtherWindon'">关闭其他窗口</div>
			<div class="menu-sep"></div><!--分割线-->
			<div data-options="name:'closeAllWindon' ,iconCls:'icon-cancel'">关闭全部窗口</div>
			<div class="menu-sep"></div>
			<div>
				<span>一级菜单</span>
				<div style="width: 150px;">
					<div>二级菜单1</div>
					<div>二级菜单2</div>
					<div>二级菜单3</div>
				</div>
			</div>
		</div>
		
		<!--更换皮肤的   下拉菜单-->
		<div id="layout_north_pfMenu" style="width: 120px;">
			<div onclick="changeTheme('default');">default</div>
			<div onclick="changeTheme('gray');">gray</div>
			<div onclick="changeTheme('black');">black</div>
			<div onclick="changeTheme('bootstrap');">bootstrap</div>
			<div onclick="changeTheme('metro');">metro</div>
		</div>
		
		<!--控制面板的  下拉菜单-->
		<div id="layout_north_kzmbMenu" style="width: 120px;">
			<div onclick="editPassword()">修改密码</div>
			<div onclick="showAbout()">联系管理员</div>
			<div class="menu-sep"></div>
			<div onclick="logoutFun()">退出系统</div>
		</div>
		
	</body>
</html>
